<template>
  <div class="login">
    <div class="nav">
      <div class="content">
        <a href="javascript:;" @click="fn_shOu">下厨房</a>
      </div>
    </div>
    <div class="deng content">
      <div class="container">
        <div class="login-content">经常登录的同志是好同志</div>
        <div class="login-box classfix">
          <div class="dl">
            <a href="javascript:;">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
          </div>
          <div class="from">
            <form action="">
              <div class="shou">
                <label for="tel">手机号</label>
                <div class="sjh">
                  <select name="" id="">
                    <option value="1">中国大陆 +86</option>
                    <option value="1">中国香港 +852</option>
                    <option value="1">中国澳门 +853</option>
                    <option value="1">美国 +1</option>
                    <option value="1">英国 +44</option>
                    <option value="1">加拿大 +1</option>
                    <option value="1">澳大利亚 +61</option>
                    <option value="1">韩国 +82</option>
                    <option value="1">中国大陆 +86</option>
                    <option value="1">中国大陆 +86</option>
                    <option value="1">中国香港 +852</option>
                    <option value="1">中国澳门 +853</option>
                    <option value="1">美国 +1</option>
                    <option value="1">英国 +44</option>
                    <option value="1">加拿大 +1</option>
                    <option value="1">澳大利亚 +61</option>
                    <option value="1">韩国 +82</option>
                    <option value="1">中国大陆 +86</option>
                  </select>
                  <input type="text" placeholder="请输入用户名" class="srk" />
                </div>
              </div>
              <div class="shou">
                <label for="tel">滑动验证</label>
                <div class="yz"><span>假证</span></div>
              </div>
              <div class="shou">
                <label for="tel">验证码</label>
                <div class="jieshou">
                  <van-button type="default" class="btn">发送验证码</van-button>
                  <input type="text" class="s1" />
                </div>
              </div>
              <div class="an-btn">
                <p>
                  <a href="javascript:;"><span>通过邮箱登录</span></a>
                </p>
                <p class="anniu">
                  <a href="javascript:;"><van-checkbox v-model="checked" icon-size="16px">记住我</van-checkbox></a>
                  <a href="javascript:;"><span>忘记密码</span> </a>
                </p>
                <p><van-checkbox v-model="checked" icon-size="16px">我已阅读并同意下厨房 <span>《用户协议》</span>和<span>《隐私政策》</span></van-checkbox></p>
              
                <van-button type="danger" size="normal">登录</van-button>
              </div>
             
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    return {
      checked: true,
    };
  },

  mounted() {},

  methods: {
    fn_shOu(){
      this.$router.push('/')
    }
  },
};
</script>

<style lang="less" scoped>
.nav {
  background: #fff;
  border-bottom: .0625rem solid #ccc;
  box-sizing: border-box;
  .content {
    height: 4.375rem;
    display: flex;
    align-items: center;
    a {
      display: block;
      width: 7.5rem;
      height: 2.5rem;
      margin-top: -0.125rem;
      text-indent: -99em;
      background: url()
        no-repeat;
    }
  }
}
.deng {
  margin-top: 1.875rem;
  max-width: 100%;
  .container {
    padding: 2.5rem 0;
    .login-content {
      padding: 0 0 2.5rem;
      font-size: 2.125rem;
      margin: 0 0 1rem;
      text-align: center;
      font-weight: 700;
    }
    .login-box {
      margin: auto;
      padding: 0 0 5rem;
      .dl {
        margin: 0 0 0 6.25rem;
        float: left;
        a {
          display: block;
          width: 12.125rem;
          height: 2.5rem;
          background: url(https://s.chuimg.com/dist/d073999.png) no-repeat;
          margin-bottom: .9375rem;
          text-indent: -99em;
          &:nth-child(2) {
            background-position: 0 -3.4375rem;
          }
          &:nth-child(3) {
            background-position: 0 -6.875rem;
          }
        }
      }
    }
  }
}
.from {
  margin: 0 0 0 3.125rem;
  float: left;
  .shou {
    margin: 0 0 1.875rem;
    display: flex;
    height: 3.125rem;
    line-height: 3.125rem;
    align-items: center;
    box-sizing: border-box;
    select {
      padding: 4.2% 2%;
    }
    .sjh {
      display: flex;
      border: .0625rem solid #999;
      .van-cell {
        padding: .625rem .5rem;
      }
      .srk {
        width: 12.5rem;
        border-left: .0625rem solid #ccc;
        padding: .3125rem .5rem;
      }
    }
    .yz {
      width: 18.75rem;
      height: 2.125rem;
      background: #e8e8e8;
      position: relative;
      span {
        text-align: center;
        width: 2.5rem;
        height: 2rem;
        line-height: 2rem;
        border: .0625rem solid #ccc;
        position: absolute;
        left: 0;
        cursor: move;
        background: #fff;
        z-index: 2;
        font-size: .75rem;
      }
    }
    .jieshou {
      display: flex;
      justify-content: center;
      .btn {
        padding: 0;
        font-size:.75rem;
        color:#fff;
        width: 8.125rem;
        background: #c6c1b8;
      }
      input {
        border: .0625rem solid #ccc;
        padding: .5rem;
        margin-left: .625rem;
      }
    }
  }
}
select {
  display: flex;
  flex-direction: column;
  option {
    padding: .875rem .75rem;
  }
}
label {
  margin: 0 .625rem 0 0;
  width: 6.25rem;
  text-align: right;
  display: inline-block;
}
.classfix::after {
  content: "";
  display: block;
  clear: both;
}
.van-button::before {
  height: 0;
}
.an-btn{
  margin:-20px 0 0 110px;
  p{
    span{
      color:#dd3915;
    }
    font-size:12px;
    margin-bottom: 20px;
    &:first-child{
      text-align: right;
    }
    &:nth-child(2){
      display: flex;
      justify-content: space-between;
    }
  }
  .van-button--normal{
    padding: 7.5px 30px;
  }
}
</style>